<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue的组件开发 组件的数据和事件</title>
  </head>
  <body>
    <div id="app">
      {{msg}}
      <input type="text" v-model="name" />
      <input type="text" v-model="age" />
      <!-- @dw   @edit-name  向子组件中传递事件 定义的事件名如果要驼峰的话  用 - 连接 -->
      <!-- 
        子组件中调用传递过来的相关事件必须使用 
        this.$emit('dw') 、this.$emit('edit-name') 、
        
        方式调用 -->
      <main-componet :name="name" :age="age" @dw="aa" @edit-name="changeName">
      </main-componet>
    </div>
    <template id="mainComponet">
      <div>
        <h1>欢迎:{{name}} 年龄:{{age}} ,进入直播间</h1>
        <ul>
          <!-- <li>SSM框架基础</li>
          <li>采购管理项目实战</li>
          <li>前端-Vue框架基础</li>
          <li>SpringBoot后台框架</li> -->
          <li v-for="(book,index) in books" :key="book.bookId">
            {{book.bookName}}
          </li>
        </ul>
        <button @click="dz">点赞</button>
        <button @click="change">点我</button>
        <button @click="changeName">点我切换为张三</button>
      </div>
    </template>
  </body>
</html>
<script type="module">
  import {} from "./js/vue.js";
  //展示组件
  //   let mainComponet = {
  //     template: "<div><h1>欢迎:{{name}} 年龄:{{age}} ,进入直播间</h1></div>",
  //     props: ["name", "age"], //props作用 用来接收使用组件时通过组件标签传递的数据
  //   };
  let mainComponet = {
    template: "#mainComponet",
    props: ["name", "age"], //props作用 用来接收使用组件时通过组件标签传递的数据
    data() {
      //存放组件数据
      return {
        books: [],
      };
    },
    methods: {
      //组件内部自定义方法
      dz() {
        alert(this.name + "进行了点赞");
      },
      change() {
        this.$emit("dw"); //调用组件传递过来的其他函数时需要使用 this.$emit('函数名调用')
      },
      changeName() {
        this.$emit("edit-name");
      },
    },
    created() {
      console.log("展示组件初始完成");
      this.books = [
        { bookId: 1, bookName: "SSM框架基础" },
        { bookId: 2, bookName: "采购管理项目实战" },
        { bookId: 3, bookName: "前端-Vue框架基础" },
        { bookId: 4, bookName: "SpringBoot后台框架" },
        { bookId: 5, bookName: "前后台分离项目实战" },
      ];
    },
  };
  new Vue({
    el: "#app",
    data: {
      msg: "hello,vue!!",
      name: "李四",
      age: 22,
    },
    methods: {
      aa() {
        alert("父组件传递aa函数");
      },
      changeName() {
        this.name = "张三";
      },
    },
    components: {
      mainComponet,
    },
  });
</script>